<template>
    <div>

<Swipe class="my-swipe" :initial-swiper="initialSwipe" :width="width" :hight="height" :autoplay="3000" indicator-color="white">
  <SwipeItem v-for="(item,index) in bannerList" :key="index">
      <img :src="item.picUrl || item.pic" :style="imageStyle"/>
  </SwipeItem>
</Swipe>

    </div>
</template>
<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
Vue.use(Swipe);
Vue.use(SwipeItem);

export default {
    components:{
    Swipe,
    SwipeItem
  },
    props:{
        bannerList:{
            type:Array,
            require:true,
        },
        autoplay:{
            type:Number||String,
            default:3000
        },
        initialSwipe:{
            type:Number|| String,
            default:0
        },
        width:{
            type:String,
            default:'auto'
        },
        height:{
            type:String,
            default:'auto'
        },
    },
    computed:{
        imageStyle:function(){
            return{
                width:'100%',
                height:'14rem',
            }
        }
    }
}
</script>
<style lang="stylus" scoped>

</style>